<!--
 * @Description: {{ByRuin}}
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2021-12-28 15:28:20
 * @LastEditors: 刘引
 * @LastEditTime: 2022-01-04 13:17:24
-->
<template>
  <div class="user">
    <div class="w">
      <div class="container" v-if="this.$store.state.isChange == false">
        <div class="title">
          <h2>通过淘芯，采用这些全球优质产品</h2>
          <p>线上线下全垒打，焕发传统行业新生力</p>
        </div>
        <div class="user-logo">
          <div>
            <ul>
              <li>
                <img src="../assets/img/common/texas.png" />
              </li>
              <li>
                <img src="../assets/img/common/infineon.png" />
              </li>
              <li>
                <img src="../assets/img/common/on.png" />
              </li>
              <li>
                <img src="../assets/img/common/xilinx.png" />
              </li>
            </ul>
          </div>
          <div>
            <ul>
              <li>
                <img src="../assets/img/common/nxp.png" />
              </li>
              <li>
                <img src="../assets/img/common/vishay.png" />
              </li>
              <li>
                <img src="../assets/img/common/rohm.png" style="padding-right: 8px;" />
              </li>
              <li>
                <img src="../assets/img/common/enesas.png" />
              </li>
            </ul>
          </div>
          <div>
            <ul>
              <li>
                <img src="../assets/img/common/ixys.png" />
              </li>
              <li>
                <img src="../assets/img/common/a.png" />
              </li>
              <li>
                <img src="../assets/img/common/diodes.png" />
              </li>
              <li>
                <img src="../assets/img/common/toshiba.png" />
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="container" v-if="this.$store.state.isChange">
        <div class="title">
          <h2>Purchasing these global high-quality products through Taoxin</h2>
          <p>Gaining advantages both online and offline, bringing new power to traditional industries</p>
        </div>
        <div class="user-logo">
          <div>
            <ul>
              <li>
                <img src="../assets/img/common/texas.png" />
              </li>
              <li>
                <img src="../assets/img/common/infineon.png" />
              </li>
              <li>
                <img src="../assets/img/common/on.png" />
              </li>
              <li>
                <img src="../assets/img/common/xilinx.png" />
              </li>
            </ul>
          </div>
          <div>
            <ul>
              <li>
                <img src="../assets/img/common/nxp.png" />
              </li>
              <li>
                <img src="../assets/img/common/vishay.png" />
              </li>
              <li>
                <img src="../assets/img/common/rohm.png" style="padding-right: 8px;" />
              </li>
              <li>
                <img src="../assets/img/common/enesas.png" />
              </li>
            </ul>
          </div>
          <div>
            <ul>
              <li>
                <img src="../assets/img/common/ixys.png" />
              </li>
              <li>
                <img src="../assets/img/common/a.png" />
              </li>
              <li>
                <img src="../assets/img/common/diodes.png" />
              </li>
              <li>
                <img src="../assets/img/common/toshiba.png" />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts"></script>
<style lang="scss" scoped>
.user {
  width: 100vw;
  height: 800px;
  background-color: #f6f9fd;
  text-align: center;
  .title {
    padding-top: 60px;
    h2 {
      font-size: 30px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #354059;
    }
    p {
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #808797;
      margin-top: 28px;
    }
  }
  .user-logo {
    margin-top: 60px;
    div {
      margin-top: 18px;
      ul {
        display: flex;
        justify-content: space-between;

        li {
          display: block;
          border: 1px solid #e4e5e5 !important;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 287px;
          height: 173px;
          background: #fff;
        }
      }
    }
  }
}
</style>